<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ include file="/pages/common/common.jsp" %>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>树形数据结构</title>
	<link rel="stylesheet" href="<%=request.getContextPath()%>/scripts/ztree/css/demo.css" type="text/css">
	<link rel="stylesheet" href="<%=request.getContextPath()%>/scripts/ztree/css/zTreeStyle.css" type="text/css">
	<link rel="stylesheet" href="<%=request.getContextPath()%>/styles/base.css" type="text/css">
	<link rel="stylesheet" href="<%=request.getContextPath()%>/styles/lazy.css" type="text/css">
	<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/jquery/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/ztree/js/jquery.ztree.all-3.5.min.js"></script>

	<style type="text/css">
		.content_wrap {width: 580px;height:360px;}
		.content_wrap div.left{float: left;width: 235px;height: 350px;padding-left: 50px;}
		.content_wrap div.right{float: right;width: 235px;height: 350px;}
	</style>
<script type="text/javascript">
var setting = {
		async: {
			enable: true,
			url:"${pageContext.request.contextPath}/rptTools/treeData/treenode/${compSid}/${attrName}/${rightValue}/${parentValue}",
			type:"post",
			dataType:"json",
			autoParam:["id"],
			dataFilter: filter
		},
		callback: {
			onAsyncError: onAsyncError,
			onAsyncSuccess: onAsyncSuccess,
			onCheck:onTreeCheck,
			onClick:onTreeClick
		},
		check: {
			enable: true,
			chkboxType: { "Y": "", "N": ""}
		},	
		view: {
			showIcon:true
		},
		data: {
			keep: {
				leaf: true		
			},
			simpleData: {    //主要是为了加载当前登录机构的父节点
				enable:true,  //使用简单数据模式，并且让数据满足父子关系。
				idKey: "id",
				pIdKey: "pid",
				rootPId: null
			}			
		}
	
	};
	if('${isMulti}' == 'true'){
		setting.check.chkStyle = "checkbox";
	} else {
		setting.check.chkStyle = "radio"; //单选
		setting.check.radioType = "all";   //设置整棵树单选
	}
	
  	var isMulit = '${isMulti}';
	var seldDefineName = '${selfDefineName}';
	var selfDefineValue = '${selfDefineValue}';
	var readOnly = '${readOnly}';
	var needSearch = '${needSearch}';

	function filter(treeId, parentNode, childNodes) {
		if (!childNodes) return null;
		for (var i=0, l=childNodes.length; i<l; i++) {
			childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
		}
		return childNodes;
	}
	
	function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
		alert("error");
	}
	function onAsyncSuccess(event, treeId, treeNode, msg) {
		defaultcheck(treeNode, treeId);
	}
	
	function onTreeCheck(event,treeId,treeNode){
		
		if(isMulit == 'false'){
			$("select[id=selectedBox_div] option").each(function(i){
				$(this).remove();
			});
		}
		if(treeNode.checked){
			$("#selectedBox_div").append("<option value=\""+treeNode.id+"\">"+treeNode.name+"</option>");
		}
		if(!treeNode.checked)
		$("select[id=selectedBox_div] option").each(function(i){
			if($(this).val() == treeNode.id){
				$(this).remove();
			};
		});
	}
	
	function checkChildNodes(treeNode){
		if(isMulit == 'true'){
			if(treeNode.checked){
				$("#selectedBox_div").append("<option value=\""+treeNode.id+"\">"+treeNode.name+"</option>");
			}
			if(!treeNode.checked) {
				$("select[id=selectedBox_div] option").each(function(i){
					if($(this).val() == treeNode.id){
						$(this).remove();
					};
				});
			}
		}
	}
	
	function onTreeClick(event,treeId,treeNode){
		var treeObj = $.fn.zTree.getZTreeObj("resOrgBox_div");
		if(treeNode.open && isMulit == 'true'){
			if (treeNode.isParent) {
		        var childrenNodes = treeNode.children;
		        if (childrenNodes) {
		            for (var i = 0; i < childrenNodes.length; i++) {
		            	treeObj.checkNode(childrenNodes[i]);
		            	checkChildNodes(childrenNodes[i]);
		            }
		        }
			}
		} else {
			treeObj.expandNode(treeNode);
		}
	}
	
	function defaultcheck(treeNode, treeId){
		var selectValues = selfDefineValue.split(',');
		var treeObj = $.fn.zTree.getZTreeObj(treeId);

		if(typeof treeNode == "undefined" || treeNode == null || treeNode == ""){
			var rootNode = treeObj.getNodesByFilter(function (node) {
				return node.level == 0
			}, true);
			for(var j = 0; j < selectValues.length; j++) {
				if(rootNode.id == selectValues[j]) {
					rootNode.checked = true;
					treeObj.updateNode(rootNode);
					break;
				}
			}
			return ;
		} else {
			for(var i = 0; i < treeNode.children.length; i++) {
				for(var j = 0; j < selectValues.length; j++) {
					if(treeNode.children[i].id == selectValues[j]) {
						treeNode.children[i].checked = true;
						treeObj.updateNode(treeNode.children[i]);
						break;
					}
				}
			}
		}
	}

	$(document).ready(function(){
		// 如果是自定义报表，则树形控件不可选择，且初始化用户自定义的信息
		if(readOnly == '1') {
			$("#searchDiv").css('display','none');
			$("#selectedBox_div").css("height", "300px");
		    $("div.left").css('display','none');
            $("div.right").css('float','left');
            $("div.right").css('padding-left','70px');
			var treeName = seldDefineName.split(',');
			var treeId = selfDefineValue.split(',');
			if(!isEmpty(treeId)) {
				for(var i = 0;i<treeName.length;i++){
					$("#selectedBox_div").append("<option value=\""+treeId[i]+"\">"+treeName[i]+"</option>");
				}
			}
		} else if(readOnly == '0') {
			$("div.left").css('display','');
			$("div.right").css('padding-left','');
			$("div.right").css('float','right');
			if(needSearch == '1') {
				$("#searchDiv").css('display','');
				$("#selectedBox_div").css("height", "323px");
			} else {
				$("#searchDiv").css('display','none');
				$("#selectedBox_div").css("height", "300px");
			}
			var treeName = seldDefineName.split(',');
			var treeId = selfDefineValue.split(',');
			if(!isEmpty(treeId)) {
				for(var i = 0;i<treeName.length;i++){
					$("#selectedBox_div").append("<option value=\""+treeId[i]+"\">"+treeName[i]+"</option>");
				}
			}
			$.fn.zTree.init($("#resOrgBox_div"), setting);
		} else {
			$("div.left").css('display','');
			$("div.right").css('padding-left','');
			$("div.right").css('float','right');
			if(needSearch == '1') {
				$("#searchDiv").css('display','');
				$("#selectedBox_div").css("height", "323px");
			} else {
				$("#searchDiv").css('display','none');
				$("#selectedBox_div").css("height", "300px");
			}
			var treeName = seldDefineName.split(',');
			var treeId = selfDefineValue.split(',');
			if(!isEmpty(treeId)) {
				for(var i = 0;i<treeName.length;i++){
					$("#selectedBox_div").append("<option value=\""+treeId[i]+"\">"+treeName[i]+"</option>");
				}
			}
			var treeObj = $.fn.zTree.init($("#resOrgBox_div"), setting);
		}
	});
	
	function checkAndSelOrgTree(){
		var len = $("select[id=selectedBox_div] option").length;
		/*if(len == 0){
			alert('请选择数据项');
			return;
		}*/
		var atrNm = $("#autCompAttrName").val();
		var atrId = $("#autCompAttrId").val();
		var selId = "";
		var selText = "";
		$("select[id=selectedBox_div] option").each(function(i){
			selId = selId + ","+$(this).val();
			selText = selText + "," + $(this).text();
		});
		parent.treeDataBack(atrNm,atrId,selText.substring(1),selId.substring(1));
		/* $("#"+atrNm).val(selText.substring(1));
		$("#"+atrId).val(selId.substring(1));
		treeWinDig.close(); */
	}

	function searchTreeInfo() {
		var treeName = $("#treeName").val();
		$("div.left").css('display','');
		$("div.right").css('padding-left','');
		$("div.right").css('float','right');
		if(!isEmpty(treeName)) {
			setting.async.url = "${pageContext.request.contextPath}/rptTools/treeData/searchTree/${compSid}/${attrName}/${rightValue}/${parentValue}/" + encodeURI(encodeURI(treeName));
		} else {
			setting.async.url = "${pageContext.request.contextPath}/rptTools/treeData/treenode/${compSid}/${attrName}/${rightValue}/${parentValue}";
		}
		$.fn.zTree.init($("#resOrgBox_div"), setting);
	}

	function isEmpty(obj) {
		if(typeof obj == "undefined" || obj == null || obj == ""){
			return true;
		}else{
			return false;
		}
	}
</script>
</head>
<body>
 <div class="content_wrap">
	    <div class="left" >
			<fieldset>
				<legend>请选择</legend>
				<div id="searchDiv" style="padding-left: 3px;">
					<input type="text" autocomplete="off" id="treeName" name="treeName" style="width: 160px;">
					<input type="button" class="ui-btn ui-btn-blue" style="width:58px;height: 20px; font-size: 10px;" onclick="searchTreeInfo()" id="searchBtn" value="搜索"/>
				</div>
				<ul id="resOrgBox_div" class="ztree" style="width:210px;height: 290px;margin-left:3px;margin-top:3px;">
				</ul>
			 </fieldset>
			 </div>
		 <div class="right">
			 <fieldset>
				 <legend>已选择</legend>
				 <select id="selectedBox_div" multiple="multiple" style="width:223px;height: 300px;margin-left:3px;margin-top:3px;"></select>
			 </fieldset>
		</div>
</div>
<footer>
	<div align="center" style="margin-top:20px;">
		<input type="hidden" id="autCompAttrName" value="${attrNameId }"/>
		<input type="hidden" id="autCompAttrId" value="${hidAttrId }"/>
		<input type="button" class="ui-btn ui-btn-blue" style="width:80px;" id="treeSureBtnId" onclick="checkAndSelOrgTree();" value="确定"/>
	</div>
</footer>	
</body>
</html>